<template>
	<view class="login">
		<image class="login-image" src="../../static/logo.png"></image>
		<text class="title">袋我回家</text>
		<input class="login-input" placeholder="请输入手机号" :name="tel" v-model="tel"/>
		<input class="login-input" placeholder="请输入密码" type="password" :name="password" v-model="password"/>
		<u-button class="login-btn" @click="loginClick">登录</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: "",
				password:"",
			}
		},
		methods: {
			loginClick(){
				uni.showLoading({
					title:'登录中...'
				});
				uniCloud.callFunction({
				    name: 'getUser',
				    data: { 
						"tel": this.tel,
						"password": this.password,
					 }
				    })
					.then(res => {
						if(res.result.affectedDocs ==1){
							uni.hideLoading();
							uni.showToast({
								title:"登录成功",
								icon: 'none'
							});
							uni.setStorageSync('userId',res.result.data[0]._id);
							uni.setStorageSync('userName',res.result.data[0].name);
							setTimeout(function(){
								uni.switchTab({
									url:"../index/index"
								})
							},1000);
							
						}
						else{
							uni.showToast({
								title:"手机号或密码错误",
								icon: 'none'
							})
						}
					});
			},
		}
	}
</script>

<style>
	.login{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.login-image{
		width: 150rpx;
		height: 150rpx;
		margin: 190rpx 0 70rpx 0;
	}
	.title{
		font-size: 50rpx;
		color: black;
		font-weight: bold;
		margin-bottom: 50rpx;
	}
	.login-input {
		border: 1rpx solid gray;
		border-radius: 30rpx;
		height: 70rpx;
		width: 550rpx;
		padding: 5rpx 20rpx;
		margin: 40rpx;
		font-size: 25rpx;
		box-sizing: border-box;
	}
	.login-btn{
		border: 1px solid #296844;
		background-color: rgba(123, 197, 111, 0.7);
		border-radius: 30rpx;
		height: 70rpx;
		width: 550rpx;
		padding:0rpx;
		margin: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: black;
	}

</style>